<template>
  <div>
    <movie-header></movie-header>

    <div class="contentMain">
      <div class="contentPic">
        <!-- 主页推荐图 -->
        <index-header-pic :imgList="headerItems"></index-header-pic>
      </div>
      <Row :gutter="8">
        <i-col span="12">
          <Card>
            <p slot="title">
              <Icon type="md-film" />
              电影
            </p>
            <ul class="cont-ul">
              <!-- 电影列表 -->
              <movies-list
                v-for="item in movieItems"
                :key="item._id"
                :id="item._id"
                :movieName="item.movieName"
                :movieTime="item.movieTime"
              ></movies-list>
            </ul>
          </Card>
        </i-col>
        <i-col span="12">
          <Card>
            <p slot="title">
              <Icon type="ios-create" />
              文章
            </p>
            <ul class="cont-ul">
              <!-- 文章列表 -->
              <articles-list
                v-for="item in newsItems"
                :key="item._id"
                :id="item._id"
                :articleTitle="item.articleTitle"
                :articleTime="item.articleTime"
              ></articles-list>
            </ul>
          </Card>
        </i-col>
      </Row>
    </div>

    <movie-footer></movie-footer>
  </div>
</template>

<script>
import MovieHeader from '../../components/MovieHeader'
import MovieFooter from '../../components/MovieFooter'
import ArticlesList from '../../components/ArticlesList'
import MoviesList from '../../components/MoviesList'
import IndexHeaderPic from '../../components/IndexHeaderPic'
import UserMessage from '../../components/UserMessage'
const movie1 = require('../../public/img/movie1.jpg')
const movie2 = require('../../public/img/movie2.jpg')
const movie3 = require('../../public/img/movie3.jpg')
const movie4 = require('../../public/img/movie4.jpg')

export default {
  data() {
    return {
      headerItems: [],
      newsItems: [],
      movieItems: []
    }
  },
  components: {
    MovieHeader,
    MovieFooter,
    ArticlesList,
    MoviesList,
    IndexHeaderPic,
    UserMessage
  },
  created() {
    // 主页推荐图
    this.$http.get('http://localhost:3000/showIndex').then(({ body }) => {
      const { data, status } = body
      if (status === 200) {
        if (data && data.length !== 0) {
          this.headerItems = data
        } else {
          this.headerItems = [
            {
              _id: 'xcvade5324aw342',
              recommendImg: movie1,
              recommendSrc: movie1,
              recommendTitle: '阿尔卑斯山脉'
            },
            {
              _id: 'xcvade7356aw343',
              recommendImg: movie2,
              recommendSrc: movie2,
              recommendTitle: '桂林山水'
            },
            {
              _id: 'xcvade1343aw344',
              recommendImg: movie3,
              recommendSrc: movie3,
              recommendTitle: '冰岛的夏天'
            },
            {
              _id: 'xcvade5478aw345',
              recommendImg: movie4,
              recommendSrc: movie4,
              recommendTitle: '北极的夏天'
            }
          ]
        }
      }
    })
    // 文章列表
    this.$http.get('http://localhost:3000/showArticle').then(({ body }) => {
      const { data, status } = body
      if (status === 200) {
        this.newsItems = data
      }
    })
    // 电影列表
    this.$http.get('http://localhost:3000/showRanking').then(({ body }) => {
      const { data, status } = body
      if (status === 200) {
        this.movieItems = data
      }
    })
  }
}
</script>

<style lang="css" scoped>
.contentMain {
  /* margin-top: 68px; */
  padding: 0 8px;
  margin-bottom: 68px;
}
.contentPic {
  padding-bottom: 8px;
}
.cont-ul {
  list-style: none;
  padding-left: 0;
  padding-top: 0.5rem;
  background-color: #fff;
}
.cont-ul::after {
  content: '';
  display: block;
  clear: both;
  width: 0;
  height: 0;
}
</style>
